<template>
  <div class="left-container">
    <h4>count子模块的数据哦：{{ num }}</h4>
    <h3>Left 组件</h3>
    <hr />
    <!-- 访问全局数据:this.$store.state.数据 -->
    <!-- <p>{{$store.state.count}}</p> -->
    <p>count 值：{{$store.state.count}}</p>
    <button @click="addBtn" class="btn btn-danger">点我传值</button>
    <button @click="btn" class="btn btn-primary">+1</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Left",
  // 1.按需导入mapState
  computed: {
     // 2. 调用 mapState 并将结果展开放入计算属性中 多了一个 count 计算属性
    ...mapState(["counte", "name"]),
    // 参数1: 子模块注册的名称， 参数2: 要映射的数据
    ...mapState("counte", ["num"]),
  },
  methods: {
    addBtn() {
      // mutation 传参/提交载荷:在 commit() 提交任务时传入第二个参数
      this.$store.commit("add", { num: 7000, name: "八云紫" });
    },
    // 访问子模块count的test方法：参数1：子模块注册名，参数2：要练映射的mutation函数
    ...mapMutations("counte", ["test"]),
     ...mapMutations(["add"]),
    btn() {
      this.add({ num: 1 });
    },
  },
};
</script>

<style>
</style>
